<template>
    <div style="width: 1000px;">
        <div class="flex_b">
            <div>
                <el-button type="primary" @click="addBtn" size="mini">添加岗位</el-button>
            </div>
        </div>
		<br>
        <el-table  :data="result"   border  style="width: 100%" >
			<el-table-column  label="序号"  align="center">
				<template slot-scope="scope">
				   <div>
					   {{scope.$index+1}}
				   </div>
				</template>
			</el-table-column>
            <el-table-column   align="center"    prop="post_name"    label="岗位名称"></el-table-column>
            <el-table-column  align="center"   prop="add_time"  label="添加时间"></el-table-column>
			<el-table-column  align="center"   prop="update_time"  label="修改时间"></el-table-column>
			<el-table-column  label="状态"  align="center">
				<template slot-scope="scope">
				   <el-switch
				     v-model="scope.row.status"
					 :inactive-value="'0'"
					 :active-value="'1'"
					 @change="changeData(scope.row)"
					 >
				   </el-switch>
				</template>
			</el-table-column>
            <el-table-column  label="操作"  fixed="right"  align="center">
                <template slot-scope="scope">
                    <el-button @click="editAuth(scope.row)" 
						type="text" size="small">
						编辑权限
					</el-button>
                    <el-button type="text" size="small" 
						@click="updateData(scope.row)">
						编辑
					</el-button>
                </template>
            </el-table-column>
        </el-table>
        
		
		<el-dialog
		        :title="title"
				:close-on-click-modal="false"
		        :visible.sync="isShow"
		        width="700px"
		>
		    <el-form  :model="info" label-width="120px">
		        <el-form-item label="岗位名称">
		            <el-input size="small" v-model="info.post_name" style="width: 500px"></el-input>
		        </el-form-item>
			<el-form-item label="状态">
			    <el-radio-group v-model="info.status">
			       <el-radio label="0">不启用</el-radio>
			        <el-radio label="1">启用</el-radio>
			     </el-radio-group>
			</el-form-item>
		    </el-form>
		    <span slot="footer" class="dialog-footer">
		            <el-button @click="isShow = false" size="mini">取 消</el-button>
		            <el-button :loading="loading_btn" type="primary" size="mini" @click="confirm">
						确 定
					</el-button>
		        </span>
		</el-dialog>
       
	   
	   <el-dialog
	           title="编辑权限"
	   		:close-on-click-modal="false"
	           :visible.sync="authShow"
	           width="500px"
	   >
	       <auth :id="id" @close="authShow=false" v-if="authShow" />
	   </el-dialog>
	   
    </div>
</template>
<style>

</style>
<script>
	import auth from './components/auth.vue'
    export default {
		components:{
			auth
		},
        data(){
            return {
                result:[],
				isShow:false,
				title:'添加岗位',
				info:{
					id:undefined,
					post_name:'',
					status:'1'
				},
				authShow:false,
				id:0
            }
        },
        mounted(){
			this.lodeList()         
            document.title='岗位管理'
        },
        methods:{
			changeData(row){
				for(let i in this.info){
					this.info[i] = row[i]
				}
				this.confirm()
			},
			editAuth(row){
				this.id = row.id
				this.authShow = true
			},
			updateData(row){
				for(let i in this.info){
					this.info[i] = row[i]
				}
				this.isShow = true
				this.title = '修改岗位'
			},
			confirm(){
				this.loading_btn = true
				this.$post('/system/addEditPost',this.info,res=>{
					 let result = res.data
					if(result.code == 200){
						this.$message.success(result.msg)
						this.isShow = false
						this.lodeList()
					}else{
						this.$message.error(result.msg)
					}
					this.loading_btn = false
				})
			},
            addBtn(){
				this.isShow = true
				this.title = '添加岗位'
				this.info = {
					id:undefined,
					post_name:'',
					status:'1'
				}
			},
            lodeList(){
                this.$post('/system/postJobList',{},res=>{
                	 let result = res.data
                	if(result.code == 200){
						this.result = result.data
                	}
                })
            },
            
        }
    }
</script>
